<template>
    <!-- 历史订单列表块 -->
    <view v-for="value,key in cacheItems" class="block" :key="key">
        <view><b>订单编号: {{key}}</b></view>
        <view><b>桌号: {{value.table}}</b></view>
        <view><b>金额: {{`￥${value.price.toFixed(2)}`}}</b></view>
        <view><b>时间: {{value.time}}</b></view>
        <!-- 展开详情开关 -->
        <label><b>展开详情:</b>
            <switch 
                color="green"
                :checked="unfoldStatus[key]" @change="changeFoldState(String(key))"
            />
        </label>
        <!-- 订单详情 -->
        <view v-show="unfoldStatus[key]" class="detail-block">
            <view v-for="info,dish in value.list" class="detail-line">
                <!-- 菜品名称 -->
                <text class="dish-name">{{dish}}</text>
                <!-- 菜品价格 -->
                <text>￥{{info.price.toFixed(2)}}</text>
                <!-- 菜品数量 -->
                <text>×{{info.count}}</text>
            </view>
        </view>
        <TextButton class="again-button" @click="orderAgain(value.list)">再来一单</TextButton>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
//导入购物清单类型
import type { ShoppingList } from '../stores/list';
//导入文本按钮组件
import TextButton from './common/TextButton.vue';
//使用全局状态-订单缓存、购物清单
import { useCacheStore } from '../stores/cache';
import { useListStore } from '../stores/list';
const orderCache=useCacheStore();
const shoppingList=useListStore();
//提取缓存条目
const cacheItems=JSON.parse(JSON.stringify(orderCache.content));
delete cacheItems.length;
//初始化订单详情展开状态
interface UnfoldStatus{
    [index:number]:boolean
}
const unfoldStatus=ref<UnfoldStatus>({});
for(const key of Object.keys(cacheItems)){
    (unfoldStatus.value)[key]=false;
}
//定义展开/折叠订单详情方法
function changeFoldState(item:string):void{
    (unfoldStatus.value)[item]=!(unfoldStatus.value)[item];
}
//定义再来一单按钮回调函数
function orderAgain(list:ShoppingList):void{
    shoppingList.update(list);
}
</script>

<style lang="scss" scoped>
$text-margin:2vw;
/* 列表块样式布局 */
.block{
    background-color: grey;
    border: {
        color:white;
        style:solid;
        top-width:0;
    }
}
/* 加粗文本样式布局 */
b{
    margin: {
        left:$text-margin;
        bottom:$text-margin;
    }
    font-size:5vw;
}
/* 再来一单开关尺寸 */
switch{
    transform:scale(0.6);
}
/* 公用外边距样式 */
%margin-style{
    margin-left:$text-margin;
    margin-right:$text-margin;
}
/* 订单详情块样式布局 */
.detail-block{
    @extend %margin-style;
    background-color:white;
    padding: {
        bottom:$text-margin;
        top:$text-margin;
    }
    margin-bottom: $text-margin;
}
/* 订单详情行样式布局 */
.detail-line{
    @extend %margin-style;
    display:flex;
    justify-content: space-between;
    align-items: center;
    border: {
        width:1px;
        style:solid;
        color:green;
    }
    margin-bottom:$text-margin;
}
/* 菜品名称文本块最大宽度 */
.dish-name{
    max-width:30%;
}
/* 再来一单按钮下边距 */
.again-button{
    margin-bottom:$text-margin;
}
</style>
